@import "config";

.v-context {
    transition: opacity .3s cubic-bezier(0.23, 1, 0.32, 1);
    // transform-origin: top left;
    opacity: 0;
    // transform: scaleY(0);
    &, & ul {
        background-color: $menu-bg;
        background-clip: padding-box;
        border-radius: 5px;
        border: 1px solid $menu-border;
        // box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
        display: block;
        margin: 0;
        padding: 7.5px 0;
        min-width: auto;
        z-index: 1500;
        position: fixed;
        list-style: none;
        box-sizing: border-box;
        max-height: calc(100% - 50px);
        overflow-y: auto;

        > li {
            margin: 0;
            position: relative;

            > a {
                display: block;
                padding: 7.5px 15px;
                // font-weight: 400;
                font-size: 14px;
                color: $item-color;
                text-decoration: none;
                white-space: nowrap;
                background-color: transparent;
                border: 0;

                &:hover,
                &:focus {
                    text-decoration: none;
                    color: $item-hover-color;
                    background-color: $item-hover-bg;
                }

                &:focus {
                    outline: 0;
                }
            }
        }

        &:focus {
            outline: 0;
        }
    }

    &__sub {
        > a:after {
            content: "\203A";
            float: right;
            padding-left: 7.5px;
        }

        > ul {
          opacity: 0;
          width: 0;
          height: 0;
        }
    }
}
